<!--<template>
  <div id="big">
    <!-- <el-button type="primary" size="mini" @click="showDrawer" id="add1">添加数据</el-button>
    <el-input style="width:20%" placeholder="输入用户名查询" v-model="text" id="select1"></el-input>
    <el-button type="primary" size="mini" @click="select" id="renew">查询</el-button>
    <el-button type="primary" size="mini" @click="renew" >重置</el-button> -->
    <!--<el-table
      :data="chapterList.slice((paginations.currentPage - 1) * paginations.PageSize, paginations.currentPage * paginations.PageSize)"
      style="width: 60%; margin: 0 auto;" id="main">
      <el-table-column label="姓名">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->
          <!--<span style="margin-left: 10px">{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话">
        <template slot-scope="scope">
          <span>
            {{ scope.row.phone }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱">
        <template slot-scope="scope">
          <span>
            {{ scope.row.mail }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="地址">
        <template slot-scope="scope">
          <span>
            {{ scope.row.address }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
        <!--</template>
      </el-table-column>
    </el-table>
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <div style="width: 50%; margin:0 auto; margin-top: 50px">
        <el-input v-model="userName" placeholder="姓名"></el-input>
      </div>
      <div style="width: 50%; margin:0 auto; margin-top: 50px">
        <el-input v-model="telephoneNum" placeholder="电话"></el-input>
      </div>
      <div style="width: 50%; margin:0 auto; margin-top: 50px">
        <el-input v-model="eMail" placeholder="邮箱"></el-input>
      </div>
      <div style="width: 50%; margin:0 auto; margin-top: 50px">
        <el-input v-model="site" placeholder="地址"></el-input>
      </div>
      <div style="width: 50%; margin:0 auto; margin-top: 50px">
        <!-- <el-date-picker v-model="timer" style="width:95%;" type="date" placeholder="选择日期">
        </el-date-picker> -->
      <!--</div>
      <div style="margin-top: 30px">
        <el-button type="primary" size="mini" @click="subform" v-show="!this.chapterId">提交</el-button>
        <el-button type="primary" size="mini" @click="subEditForm" v-show="this.chapterId">保存</el-button>
      </div>
    </el-drawer>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="paginations.currentPage" :page-sizes="paginations.pageSizes" :page-size="paginations.PageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="chapterList.length">
      </el-pagination>
    </div>
  </div>
</template>-->
  
<!--<script>
import axios from 'axios'
export default {
  data() {
    return {
      text: '',
      // searchResult: [],
      chapterList: [],
      drawer: false,
      chapterTitle: "",
      chapterId: "",
      userName: "",
      telephoneNum: "",
      eMail: "",
      site: "",
      timer: "",
      //分页
      paginations: {
        // 默认显示第几页
        currentPage: 1,
        // 个数选择器（可修改）
        pageSizes: [1, 2, 3, 4],
        // 默认每页显示的条数（可修改）
        PageSize: 4,
      },
    }
  },
  // watch:{
  //   'text':(newV,oldV)=>{
  //     if(newV == ''){
  //       axios.get("http://localhost:3000/getnum").then(res => {
  //       let result = res.data;
  //       console.log(result)
  //       // this.chapterList = result;
  //       // this.searchResult = this.chapterList
  //     })
  //     }
  //   }
  // },
  // created() {
  //   this.searchResult = this.chapterList //存储
  // },
  methods: {
    //  编辑的提交
    subEditForm() {
      if (localStorage.getItem('token')) {
        axios.post(
          "http://localhost:3000/subeditform",
          {
            chapterId: this.chapterId,
            userName: this.userName,
            telephoneNum: this.telephoneNum,
            eMail: this.eMail,
            site: this.site,
            timer: this.timer
          }
        ).then((res) => {
          if (res.data.code == 200) {
            //success warn danger
            this.drawer = false;
            this.getList();
          }
        })
      } else {
        alert('未登录')
      }
    },
    // 添加数据的提交
    subform() {
      if (localStorage.getItem('token')) {
        axios.post(
          "http://localhost:3000/subform",
          { userName: this.userName, timer: this.timer, telephoneNum: this.telephoneNum, eMail: this.eMail, site: this.site }
        ).then((res) => {
          if (res.data.code == 200) {
            this.drawer = false;
            this.getList();
          }
        })
      } else {
        alert('未登录')
      }
    },
    // 添加数据的默认内容
    showDrawer() {
      this.drawer = true;
      this.userName = "";
      this.eMail = "";
      this.site = "";
      this.telephoneNum = "";
      this.chapterId = "";
      this.timer = "";
    },
    // 编辑
    handleEdit(index, row) {
      this.drawer = true;
      this.chapterId = row.chapterId;
      this.timer = row.timer;
      this.userName = row.userName;
      this.telephoneNum = row.telephoneNum;
      this.eMail = row.eMail;
      this.site = row.site;
      console.log(row)
    },
    // 删除
    handleDelete(index, row) {
      let chapterId = row.chapterId;
      if (localStorage.getItem('token')) {
        axios.post(
          "http://localhost:3000/delchapter",
          { chapterId: chapterId }
        ).then((res) => {
          if (res.data.code == 200) {
            this.getList();
          }
        })
      } else {
        alert('未登录')
      }
    },
    // 查询
    select() {
      axios.post("http://localhost:3000/select", { text: this.text }).then(res => {
        console.log(res.data)
        let result = res.data;
        this.chapterList = result;
      })
    },
    // 重置
    renew(){
      axios.get("http://localhost:3000/getnum").then(res => {
        let result = res.data;
        this.chapterList = result;
        this.text = ''
      })
    },
    //获取
    getList() {
      axios.get("http://localhost:3000/getnum").then(res => {
        let result = res.data;
        this.chapterList = result;
        // this.searchResult = this.chapterList
      })
    },
    // //分页/
    // 每页显示多少条
    handleSizeChange(val) {
      // 改变每页显示的条数 
      this.paginations.PageSize = val
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.paginations.currentPage = 1
      console.log(`每页 ${val} 条`);
    },
    // 现在显示当前页的第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.paginations.currentPage = val
      console.log(`当前页: ${val}`);
    },
    // handleOpen(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    // handleClose(key, keyPath) {
    //   console.log(key, keyPath);
    // }

    // searchh: function () {
    //   if (localStorage.getItem('token')) {
    //     this.searchResult = this.chapterList.filter(item => item.userName.includes(this.text))
    //   } else {
    //     alert('未登录')
    //   }
    // }
  },
  mounted() {
    console.log(this.$route)
    this.getList();
  }
}
</script>-->
<!--<style>
#big {
  margin: 0 auto;
  height: 800px;
}

#add1 {
  margin-left: 320px;
}

#select1 {
  margin-left: 520px;
}

.block {
  margin-left: 400px
}
#renew{
  margin-left: 70px;
}
</style>-->

<template>
  <div id="information">
      <div id="info">
          <h1 style="text-align:center;">用户信息</h1>
          <el-avatar :src="imageUrl" style="margin-left:455px ;"></el-avatar>
          <div id="player">
              <span><h2>昵称:{{showUserName}}</h2></span>
              <span><h2>性别:{{user.gender}}</h2></span>
              <span><h2>年龄:{{user.age}}</h2></span>
              <span><h2>个性签名:{{user.signature}}</h2></span>
              <span><h2>邮箱:{{user.email}}</h2></span>
              <span><h2>电话:{{user.phone}}</h2></span>
              <span><h2>常用地址:{{user.address1}}</h2></span>
              <span><h2>备用地址:{{user.address2}}</h2></span>
          </div>
      </div>
      <div class="btn">
        <el-button type="primary" round @click="open" style="margin-left:300px;">修改信息</el-button>
        <el-button type="primary" round @click="exit">删除信息</el-button>
        <el-button type="primary" round @click="back">保存并返回</el-button>
      </div>
      <div class="modal" v-show="showModal">
        <div class="modal-background"></div>
          <div class="modal-content">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                  <input type="file" accept="image/*" @change="handleFileChange">
                  <img :src="imageUrl" alt="avatar" style="width:20px;height: 20px;">
                  <el-form-item label="昵称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                  </el-form-item>
                  <el-form-item label="性别" prop="name">
                    <el-input v-model="ruleForm.gender"></el-input>
                  </el-form-item>
                  <el-form-item label="年龄" prop="name">
                    <el-input v-model="ruleForm.age"></el-input>
                  </el-form-item>
                  <el-form-item label="个性签名" prop="name">
                    <el-input v-model="ruleForm.signature"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="name">
                    <el-input v-model="ruleForm.email"></el-input>
                  </el-form-item>
                  <el-form-item label="电话" prop="name">
                    <el-input v-model="ruleForm.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="常用地址" prop="name">
                    <el-input v-model="ruleForm.address1"></el-input>
                  </el-form-item>
                  <el-form-item label="备用地址" prop="name">
                    <el-input v-model="ruleForm.address2"></el-input>
                  </el-form-item>
                  <el-button type="primary" round @click="change" style="margin-left:200px ;">确认修改</el-button>
                </el-form>
              </div>
      </div>
  </div>
</template>

<script>
import axios from 'axios';
import Cookie from 'js-cookie';
export default {
data() {
  return {
    imageUrl: '',
    giaodata:'',
    user: {
      name: "",
      age: "",
      gender: "",
      email: "",
      phone:"",
      signature:"",
      address1:"",
      address2:"",
    },
    ruleForm: {
      name: "",
      age: '',
      gender: "",
      email: "",
      phone:"",
      signature:"",
      address1:"",
      address2:"",
    },
    rules: {
        name: [
          { required: true, message: '相关信息不能为空', trigger: 'blur' },
        ]
    },
    showModal: false,
  };
  
}, 
methods: {
    back(){
      this.$router.push('/navi')
    },
    exit(){
      localStorage.removeItem('imgpath')
      localStorage.removeItem('useinfo')
    },
    change(){
      this.showModal=false
      const data = this.ruleForm
      this.user =data
      console.log(data);
      //存储到本地缓存
      localStorage.setItem('useinfo', JSON.stringify(data))
      axios.post('http://localhost:3000/info',data)
          .then(res=>{
              console.log(res)
          })
          .catch(error=>{
              console.log(error)
          }) 
    },
    open() {
      this.showModal=true;
    },
    handleFileChange(e) {
      const file = e.target.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = e => {
      const giao = e.target.result
      //存储到本地缓存
      localStorage.setItem('imgpath', giao)
      this.imageUrl = giao
      }
      // 创建 FormData 对象用于存储文件和其他参数
       const formData = new FormData()
      formData.append('avatar', file)

      // 发送 post 请求上传文件
      axios.post('http://localhost:3000/img', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(resp => {
        const path =resp.data.uploadDir
        console.log(path)
        //localStorage.setItem('imgpath', path)
      }).catch(error => {
        console.log('上传失败', error.response.data)
      }) 
  },
  },
  computed:{
      showUserName(){
        return Cookie.get('username')
      }
    },
  created(){
      const userInfoString = localStorage.getItem('useinfo')
      const userInfo = JSON.parse(userInfoString)
      const imgdata = localStorage.getItem('imgpath')
      this.user.name = userInfo.name
      this.user.age  = userInfo.age
      this.user.gender = userInfo.gender
      this.user.email = userInfo.email
      this.user.phone = userInfo.phone
      this.user.signature = userInfo.signature
      this.user.address1  = userInfo.address1
      this.user.address2 = userInfo.address2
      this.imageUrl=imgdata
  }
}
</script>

<style>
.btn{
  display: flex;
  flex-direction: row;
}
#information{
  width: 950px;
  height: 800px;
  margin: auto;
  background-color:whitesmoke;
}
#info{
  width: 950;
  height: 600px;
}
#player{
  width: 750px;
  margin: auto;
  text-align: left;
}
.modal {
margin: auto;
position: relative;
bottom: 600px;
width: 800px;
height: 800px;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}

.modal-content {
background-color: white;
width: 570px;
height: 570px;
margin: auto;
padding: 20px;
}

.modal-close {
position: absolute;
top: 10px;
right: 10px;
}
</style>